<template>
  <div class="box">
    <!-- 导航栏 -->
    <div class="header">
      <div class="content">
        <div class="date" @click="changedate()">
          <span>{{ day }}</span
          ><span>{{ month }}</span
          >.<span>{{ year }}</span>
          <span class="Up"></span>
        </div>
        <div v-if="wearher">
          <span>{{ wearher.city_name }}</span
          >·
          <span>{{ wearher.climate }}</span>
          <span style="margin-left: 10px">{{ wearher.temperature }}°C</span>
        </div>
      </div>
    </div>
    <dailySignature
      v-if="!showDate"
      :newYear="year"
      :newMonth="monthCN"
      :date="date"
      @changeDate="changeDates"
    ></dailySignature>
    <div class="containers" v-if="showDate">
      <div class="list" v-for="item in dataList.content_list" :key="item.id">
        <!-- 第一个盒子 -->
        <div class="oneBox" v-if="item.category == 0">
          <div class="one">
            <img :src="item.img_url" />
            <div>
              <span>{{ item.title }}</span
              >|<span>{{ item.pic_info }}</span>
            </div>
            <div>{{ item.forward }}</div>
            <div @click="show = true">{{ item.words_info }}</div>
            <div v-if="show">
              <van-overlay :show="show" @click="show = false" z-index="1000">
                <div class="wrapper">
                  <div class="block">
                    <div class="wapContent">
                      <div>ABOUT</div>
                      <div>
                        {{ item.text_author_info.text_author_name.toString() }}
                      </div>
                      <div>
                        {{ item.text_author_info.text_author_work.toString() }}
                      </div>
                      <div>
                        {{ item.text_author_info.text_author_desc.toString() }}
                      </div>
                    </div>
                  </div>
                </div>
              </van-overlay>
            </div>
          </div>
          <div class="oneBottom">
            <div @click="$router.push('/XiaojiSquare')">
              <span><van-icon name="umbrella-circle"></van-icon></span>
              <span>小记</span>
            </div>
            <div class="righticon">
              <van-icon name="edit" />
              <van-icon name="bookmark-o" style="margin-left: 10px" />
              <van-icon name="like-o" style="margin-left: 10px" /><span>{{
                item.like_count
              }}</span>
              <van-icon name="share-o" style="margin-left: 10px" />
            </div>
          </div>
        </div>

        <!-- 第二个盒子             判断显示 -->
        <div
          class="twobox"
          v-if="ofdata.includes(item.category)"
          @click="
            viewArticles(
              item.item_id,
              item.category,
              item.tag_list,
              item.share_list.wx.title
            )
          "
        >
          <div class="two">
            <!--  getFor(item.tag_list)没处理的话是显示数组，简单处理就是直接 + ''  或者在方法里面使用join()转字符串   -->
            <div class="sharetitle">
              -{{
                getFor(item.tag_list) || item.share_list.wx.title.slice(0, 2)
              }}-
            </div>
            <div class="itemtitle">{{ item.title }}</div>
            <div class="authoruser_name" v-if="item.category == 3">
              {{ item.author.user_name }}/答
            </div>
            <div class="authoruser_name" v-else>
              文/{{ item.author.user_name }}
            </div>
            <div class="forward">{{ item.forward }}</div>
            <img :src="item.img_url" />
            <div class="tworightIcon">
              <van-icon name="like-o" /><span>{{ item.like_count }}</span>
              <van-icon name="share-o" style="margin-left: 10px" />
            </div>
          </div>
        </div>
        <!-- 第三个盒子 收音机的-->
        <div
          class="threebox"
          v-if="item.category == 8"
          @click="goRadio(item.item_id)"
        >
          <div class="three">
            <div>-收音机-</div>
            <div class="threeimg">
              <img :src="item.img_url" />
              <div class="threeimgVolume">{{ item.volume }}</div>
              <div class="threeimgTitle">{{ item.title }}</div>
            </div>
            <div class="threeBottom">
              <div class="threeBottomLeft">
                <img :src="item.author.web_url" alt="" /><span>{{
                  item.author.user_name
                }}</span>
              </div>
              <div>
                <van-icon name="like-o" style="margin: 0 10px" /><span>{{
                  item.like_count
                }}</span>
                <van-icon name="share-o" style="margin-left: 10px" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 第四个盒子 -->
      <div class="fourbox">
        <div class="four">
          <span>欢迎来到ONE</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getHomePage } from "@/api/homePage";
import HeaderTop from "@/components/headerTop.vue";
import dailySignature from "@/components/dailySignature.vue";
export default {
  name: "homePage",
  components: {
    HeaderTop,
    dailySignature,
  },
  mixins: [],
  data() {
    return {
      dataList: {},
      show: false,
      showDate: true,
      date: "date",
      ofdata: ["1", "3"],
      isActive: true,
      wearher: {},
      year: new Date().getFullYear(),
      monthCN: new Date().getMonth() + 1,
      month: new Date().toDateString().split(" ")[1],
      day: new Date().getDate(),
      zero: 0,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getHomePage();
  },
  mounted() {},
  methods: {
    changeDates(i) {
      console.log(i);
      this.getHomePage(i);
      this.showDate = true;
    },
    // 更换日期
    changedate() {
      this.showDate = false;
    },
    async getHomePage(zero) {
      const { data } = await getHomePage(zero);
      this.dataList = data;
      this.wearher = data.weather;
      console.log(this.dataList);
    },
    getFor(items) {
      // console.log(items);
      return items
        .map((item) => {
          console.log("遍历出来的东西", item.title);
          return item.title;
        })
        .join();
    },
    viewArticles(id, category, title, titleTR) {
      // 跳转到文章详情页
      if (category === "1") {
        console.log("跳转的id", id);
        this.$router.push({
          path: "/articlesPage",
          query: {
            id: id,
            category: category,
            title: JSON.stringify(title),
            //  title:  encodeURIComponent(title),
            titleTR: encodeURIComponent(titleTR),
          },
        });
      } else if (category === "3") {
        this.$router.push({
          path: "/answer",
          query: {
            id: id,
            category: category,
            title: JSON.stringify(title),
            //  title:  encodeURIComponent(title),
            titleTR: encodeURIComponent(titleTR),
          },
        });
      }
    },
    goRadio(id) {
      // 跳转到收音机页面
      console.log("跳转到收音机页面");
      this.$router.push({
        path: "/radio",
        query: {
          id: id,
        },
      });
    },
  },
};
</script>
<style lang='less' scoped>
.box {
  width: 100%;

  background-color: #f7f7f7;
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: #ffffff;
  z-index: 1;
  color: black;
  font-size: 14px;
  padding: 0 15px;
  .content {
    display: flex;
    justify-content: space-between;
    .date {
      position: relative;
      .Up {
        position: absolute;
        right: -20px;
        bottom: 14px;
        width: 0;
        height: 0;
        border-top: 8px solid #000;
        border-right: 8px solid transparent;
        border-left: 8px solid transparent;
        border-bottom: 8px solid transparent;
      }
      & > :nth-child(1) {
        font-size: 40px;
        color: #000;
        font-weight: 700;
      }
      & > :nth-child(2) {
        font-size: 14px;
        color: #000;
        font-weight: 700;
      }
      & > :nth-child(3) {
        font-size: 14px;
        color: #000;
        font-weight: 700;
      }
    }
    & > :nth-child(2) {
      color: #8c8c8c;
      font-size: 14px;
    }
  }
}
.containers {
  padding: 50px 0 0 0;
  width: 100%;
  .list {
    padding: 0 15px;
    background-color: #ffffff;
    .oneBox {
      margin-bottom: 10px;
      box-sizing: border-box;
      .one {
        width: 350px;
        height: 100%;
        background-color: #ffffff;
        padding-bottom: 20px;
        border-radius: 10px;
        outline: solid;
        outline-width: 1px;
        outline-color: #e6e6e6;
        box-sizing: border-box;
        overflow: hidden;
        img {
          width: 350px;

          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
        }
        div:nth-child(2) {
          color: #e6e6e6;
          font-size: 12px;
          text-align: center;
        }
        div:nth-child(3) {
          color: black;
          font-size: 14px;
          margin: 30px 20px 80px 20px;
        }
        div:nth-child(4) {
          color: #e6e6e6;
          font-size: 12px;
          text-align: center;
        }
        .wrapper {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
        }

        .block {
          width: 100%;
          margin: 0 5px;
          background-color: #fff;
          box-sizing: border-box;
          border-radius: 8px;
          padding: 10px;

          .wapContent {
            div:nth-child(1) {
              font-size: 10px;
              font-style: italic;
              margin-bottom: 5px;
            }
            div:nth-child(2) {
              font-size: 18px;
              text-align: left;
              color: black;
              margin-bottom: 5px;
            }
            div:nth-child(3) {
              font-size: 12px;
              color: rgb(134, 134, 134);
              margin: 0;
            }
            div:nth-child(4) {
              width: 100%;
              height: 100px;
              font-size: 12px;
              color: rgb(134, 134, 134);
              text-align: left;
            }
          }
        }
      }
      .oneBottom {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 20px 0 20px 0;
        div:nth-child(1) {
          color: black;
        }
        div:nth-child(2) {
          color: black;
        }
      }
    }

    .twobox {
      margin-bottom: 10px;
      box-sizing: border-box;
      .two {
        padding: 20px 0;
        .sharetitle {
          text-align: center;
          font-size: 18px;
          color: #8c8c8c;
        }
        .itemtitle {
          margin-top: 20px;
          font-size: 20px;
          font-weight: 800;
          color: #000;
        }
        .authoruser_name {
          color: #bcbcbc;
          font-size: 16px;
        }
        .forward {
          margin-top: 15px;
        }
        img {
          margin-top: 15px;
          width: 350px;
          border-radius: 8px;
        }

        .tworightIcon {
          display: flex;
          justify-content: flex-end;
          margin-top: 20px;
        }
      }
    }

    .threebox {
      margin-bottom: 10px;
      .three {
        div:nth-child(1) {
          text-align: center;
        }
        .threeimg {
          position: relative;
          img {
            width: 100%;
            height: 200px;
            border-radius: 8px;
          }
          .threeimgVolume {
            position: absolute;
            left: 15px;
            top: 15px;
            color: #ffffff;
          }
          .threeimgTitle {
            position: absolute;
            left: 15px;
            bottom: 15px;
            color: #ffffff;
          }
        }

        .threeBottom {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          padding: 20px 0;
          .threeBottomLeft {
            display: flex;
            align-items: center;
            img {
              width: 30px;
              height: 30px;
              border-radius: 50%;
            }
          }
        }
      }
    }
  }
  .fourbox {
    background: #fcfcfc;
    color: #e6e6e6;
    .four {
      width: 100%;
      height: 100px;
      line-height: 100px;
      text-align: center;
      margin-bottom: 60px;
    }
  }
}
</style>